<template>
  <div class="warn-dashboard">
    <!-- 顶部统计卡片 -->
    <div class="top-stats">
      <!-- 告警类整体包裹 -->
      <div class="alarm-group">
        <div v-for="(item, idx) in topStats.slice(0, 4)" :key="idx" class="stat-card alarm">
          <div class="stat-row">
            <span class="dot" :style="{ background: item.dotColor }"></span>
            <span class="stat-value">{{ item.value }}</span>
          </div>
          <div class="stat-label">{{ item.label }}</div>
        </div>
      </div>
      <!-- 性能类 -->
      <div v-for="(item, idx) in topStats.slice(4)" :key="idx+4" class="stat-card perf">
        <div class="stat-icon">
          <i :class="item.icon"></i>
        </div>
        <div class="stat-value">
          {{ item.value }}
          <span v-if="item.unit" class="unit">{{ item.unit }}</span>
        </div>
        <div class="stat-label">{{ item.label }}</div>
      </div>
    </div>

    <!-- 下方三组状态卡片 -->
    <div class="bottom-status">
      <div class="status-card" v-for="(group, idx) in statusGroups" :key="idx">
        <div class="status-title">
          <i :class="group.icon"></i>
          {{ group.title }}
        </div>
        <div class="status-list">
          <div
              v-for="(item, i) in group.status"
              :key="i"
              class="status-item"
              :class="item.type"
          >
            <span class="status-value">{{ item.value }}</span>
            <span class="status-label">{{ item.label }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 下方折线图区域 -->
    <div class="charts-section">
      <div class="chart-card">
        <div class="chart-header">
          <div>
            <span class="chart-title">设备平均CPU利用率</span>
            <span class="chart-max">{{ maxValues.cpu }}% 最大值</span>
          </div>
          <el-dropdown>
            <span class="el-dropdown-link">
              最近一天<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>最近一天</el-dropdown-item>
              <el-dropdown-item>最近一周</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div ref="cpuChart" class="chart-box"></div>
      </div>
      <div class="chart-card">
        <div class="chart-header">
          <div>
            <span class="chart-title">设备平均内存利用率</span>
            <span class="chart-max">{{ maxValues.mem }}% 最大值</span>
          </div>
          <el-dropdown>
            <span class="el-dropdown-link">
              最近一天<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>最近一天</el-dropdown-item>
              <el-dropdown-item>最近一周</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div ref="memChart" class="chart-box"></div>
      </div>
      <div class="chart-card">
        <div class="chart-header">
          <div>
            <span class="chart-title">响应时间</span>
            <span class="chart-max">{{ maxValues.resp }}ms 最大值</span>
          </div>
          <el-dropdown>
            <span class="el-dropdown-link">
              最近一天<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>最近一天</el-dropdown-item>
              <el-dropdown-item>最近一周</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div ref="respChart" class="chart-box"></div>
      </div>
      <div class="chart-card">
        <div class="chart-header">
          <div>
            <span class="chart-title">设备状态</span>
          </div>
          <el-dropdown>
            <span class="el-dropdown-link">
              最近一天<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>最近一天</el-dropdown-item>
              <el-dropdown-item>最近一周</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div ref="statusChart" class="chart-box"></div>
      </div>
    </div>

    <!-- 新增底部统计模块 -->
    <div class="bottom-extra-section">
      <!-- 当日不可达比率 -->
      <div class="extra-card">
        <div class="extra-header">
          <div>
            <span class="extra-title">当日不可达比率
              <el-tooltip content="不可达比率=不可达次数/总检测次数" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <span class="extra-max"><span class="extra-max-value">0.81%</span> 最大值</span>
          </div>
          <el-dropdown>
            <span class="el-dropdown-link">
              最近一天<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>最近一天</el-dropdown-item>
              <el-dropdown-item>最近一周</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div ref="unreachChart" class="extra-chart"></div>
      </div>
      <!-- 日平均接口速率Top5 -->
      <div class="extra-card">
        <div class="extra-title">日平均接口速率Top5</div>
        <div ref="ifSpeedChart" class="extra-chart"></div>
      </div>
      <!-- 配置文件变更 -->
      <div class="extra-card" style="flex-direction: row; align-items: flex-start;">
        <div style="flex:1;">
          <div class="extra-title">配置文件变更</div>
          <div ref="cfgChangeChart" class="extra-pie"></div>
        </div>
        <div class="extra-info">
          <div class="extra-title" style="font-size:15px;">最新配置变更</div>
          <div class="extra-info-list">
            <div>文件类型：--</div>
            <div>备份时间：--</div>
            <div>新增行数：--</div>
            <div>变化行数：--</div>
            <div>删除行数：--</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增链路拓扑图 -->
    <div class="topology-section">
      <div class="topology-card">
        <div class="topology-title">链路关系</div>
        <div ref="topologyChart" class="topology-chart"></div>
        <div class="topology-legend">
          <div class="legend-item">
            <span class="legend-icon router"></span>
            <span>路由器</span>
          </div>
          <div class="legend-item">
            <span class="legend-icon switch"></span>
            <span>交换机</span>
          </div>
          <div class="legend-item">
            <span class="legend-icon server"></span>
            <span>服务器</span>
          </div>
          <div class="legend-item">
            <span class="legend-icon warning"></span>
            <span>端口告警</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "WarnStra",
  data() {
    return {
      topStats: [
        { label: "紧急告警", value: 6, dotColor: "#ff4d4f" },
        { label: "重要告警", value: 32, dotColor: "#faad14" },
        { label: "次要告警", value: 18, dotColor: "#ffd666" },
        { label: "提示告警", value: 58, dotColor: "#40a9ff" },
        { label: "设备平均CPU利用率", value: "32.56", unit: "%", icon: "el-icon-cpu" },
        { label: "设备平均内存利用率", value: "25.18", unit: "%", icon: "el-icon-s-grid" },
        { label: "响应时间", value: "15", unit: "ms", icon: "el-icon-time" },
        { label: "端口使用率", value: "66.56", unit: "%", icon: "el-icon-folder-opened" },
      ],
      statusGroups: [
        {
          title: "端口运行状态",
          icon: "el-icon-menu",
          status: [
            { label: "Up", value: 88, type: "up" },
            { label: "Down", value: 7, type: "down" },
            { label: "故障", value: 0, type: "fault" },
            { label: "其他", value: 22, type: "other" },
          ],
        },
        {
          title: "电源运行状态",
          icon: "el-icon-mobile-phone",
          status: [
            { label: "正常", value: 35, type: "up" },
            { label: "故障", value: 0, type: "down" },
            { label: "其他", value: 6, type: "other" },
          ],
        },
        {
          title: "风扇运行状态",
          icon: "el-icon-cloudy",
          status: [
            { label: "正常", value: 70, type: "up" },
            { label: "故障", value: 0, type: "down" },
            { label: "其他", value: 11, type: "other" },
          ],
        },
      ],
      chartData: {
        cpu: {
          x: ["06-03 20:00", "06-04 04:00", "06-05 12:00"],
          y: [68.34, 69.48, 70.56]
        },
        mem: {
          x: ["06-03 20:00", "06-04 04:00", "06-05 12:00"],
          y: [74.67, 75.32, 76.18]
        },
        resp: {
          x: ["06-03 20:00", "06-04 04:00", "06-05 12:00"],
          y: [80, 80, 80]
        },
        status: {
          x: ["06-03 20:00", "06-04 04:00", "06-05 12:00"],
          y: [170, 170, 170] // 1表示在线，0表示离线
        }
      },
      // 新增统计模块数据
      unreachData: {
        x: ["06-03 20:00", "06-04 04:00", "06-05 12:00"],
        y: [0.32, 0.58, 0.81]
      },
      ifSpeedData: [
        { name: "S7712_122:Gig0/0/1", rx: 200, tx: 1400 }
      ],
      cfgChange: {
        value: 0,
        date: "2025-06-04"
      },
      // 新增拓扑图数据
      topologyData: {
        nodes: [
          { id: 'S7712_122', name: 'S7712_122', category: 'switch', x: 100, y: 100 },
          { id: 'GigabitEthernet1/0/19', name: 'GigabitEthernet1/0/19', category: 'port', x: 300, y: 100 },
          { id: 'GigabitEthernet0/0/19', name: 'GigabitEthernet0/0/19', category: 'port', x: 500, y: 100 },
          { id: 'S5276', name: 'S5276', category: 'switch', x: 700, y: 100 }
        ],
        links: [
          { source: 'S7712_122', target: 'GigabitEthernet1/0/19' },
          { source: 'GigabitEthernet1/0/19', target: 'GigabitEthernet0/0/19' },
          { source: 'GigabitEthernet0/0/19', target: 'S5276' }
        ]
      }
    };
  },
  computed: {
    maxValues() {
      return {
        cpu: Math.max(...this.chartData.cpu.y),
        mem: Math.max(...this.chartData.mem.y),
        resp: Math.max(...this.chartData.resp.y)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts();
      this.initExtraCharts();
    });
  },
  methods: {
    initCharts() {
      this.drawLineChart(this.$refs.cpuChart, "设备平均CPU利用率", this.chartData.cpu.x, this.chartData.cpu.y, "%");
      this.drawLineChart(this.$refs.memChart, "设备平均内存利用率", this.chartData.mem.x, this.chartData.mem.y, "%");
      this.drawLineChart(this.$refs.respChart, "响应时间", this.chartData.resp.x, this.chartData.resp.y, "ms");
      this.drawStatusChart(this.$refs.statusChart, this.chartData.status.x, this.chartData.status.y);
    },
    initExtraCharts() {
      this.drawUnreachChart(this.$refs.unreachChart, this.unreachData.x, this.unreachData.y);
      this.drawIfSpeedChart(this.$refs.ifSpeedChart, this.ifSpeedData);
      this.drawCfgChangeChart(this.$refs.cfgChangeChart, this.cfgChange.value, this.cfgChange.date);
      this.drawTopologyChart(this.$refs.topologyChart, this.topologyData);
    },
    drawLineChart(dom, title, xData, yData, unit) {
      if (!dom) return;
      let myChart = echarts.init(dom);
      myChart.setOption({
        tooltip: { trigger: "axis" },
        legend: { data: [title], right: 10, top: 10 },
        xAxis: { type: "category", data: xData },
        yAxis: {
          type: "value",
          min: 0,
          axisLabel: {
            formatter: `{value}${unit}`,
            color: "#aaa",
            fontSize: 12,
            fontWeight: "normal",
            margin: 16
          },
          splitLine: {
            lineStyle: {
              color: "#f0f0f0"
            }
          }
        },
        series: [{
          name: title,
          data: yData,
          type: "line",
          smooth: false,
          showSymbol: true,
          symbol: "circle",
          symbolSize: 8,
          lineStyle: { width: 2 },
          itemStyle: { color: "#409EFF" }
        }]
      });
    },
    drawStatusChart(dom, xData, yData) {
      if (!dom) return;
      let myChart = echarts.init(dom);
      myChart.setOption({
        tooltip: { trigger: "axis" },
        legend: { data: ["设备状态"], right: 10, top: 10 },
        xAxis: { type: "category", data: xData },
        yAxis: {
          type: "value",
          min: 0,
          max: 1,
          axisLabel: {
            formatter: () => "在线",
            color: "#aaa",
            fontSize: 12,
            fontWeight: "normal",
            margin: 16
          },
          splitLine: {
            lineStyle: {
              color: "#f0f0f0"
            }
          }
        },
        series: [{
          name: "设备状态",
          data: yData,
          type: "line",
          step: "end",
          showSymbol: true,
          symbol: "circle",
          symbolSize: 8,
          lineStyle: { width: 2 },
          itemStyle: { color: "#409EFF" }
        }]
      });
    },
    drawUnreachChart(dom, xData, yData) {
      if (!dom) return;
      let myChart = echarts.init(dom);
      myChart.setOption({
        tooltip: { trigger: "axis" },
        legend: { data: ["当日不可达比率"], right: 10, top: 10 },
        grid: { left: 50, right: 20, top: 30, bottom: 30 },
        xAxis: {
          type: "category",
          data: xData,
          axisLine: { onZero: false },
          axisTick: { alignWithLabel: true }
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 100,
          axisLabel: {
            formatter: "{value}%",
            color: "#aaa",
            fontSize: 12,
            margin: 16
          },
          splitLine: { lineStyle: { color: "#f0f0f0" } },
          axisLine: { onZero: false }
        },
        series: [{
          name: "当日不可达比率",
          data: yData,
          type: "line",
          showSymbol: true,
          symbol: "circle",
          symbolSize: 8,
          lineStyle: { width: 2 },
          itemStyle: { color: "#409EFF" }
        }]
      });
    },
    drawIfSpeedChart(dom, data) {
      if (!dom) return;
      let myChart = echarts.init(dom);
      myChart.setOption({
        tooltip: { trigger: "axis" },
        legend: {
          data: [
            {
              name: "接口接收速率",
              icon: "circle"
            },
            {
              name: "接口发送速率",
              icon: "circle"
            }
          ],
          formatter: function(name) {
            if (name === "接口接收速率") {
              return '{a|接口接收速率}{arrow|↓}';
            }
            if (name === "接口发送速率") {
              return '{b|接口发送速率}';
            }
            return name;
          },
          right: 10,
          top: 10,
          textStyle: {
            rich: {
              a: { color: '#409EFF', fontWeight: 'normal' },
              b: { color: '#52c41a', fontWeight: 'normal' },
              arrow: { color: '#ed3f35', fontSize: 14, fontWeight: 'bold' }
            }
          }
        },
        grid: { left: 120, right: 20, top: 40, bottom: 20 },
        xAxis: {
          type: "value",
          name: "bps",
          nameTextStyle: { color: "#888", fontSize: 12, padding: [0, 0, 0, 8] }
        },
        yAxis: {
          type: "category",
          data: data.map(d => d.name),
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            color: "#888",
            fontSize: 12,
            align: "right",
            overflow: "truncate",
            width: 100,
            margin: 16
          }
        },
        series: [
          {
            name: "接口接收速率",
            type: "bar",
            data: data.map(d => d.rx),
            itemStyle: { color: "#409EFF" },
            barWidth: 12
          },
          {
            name: "接口发送速率",
            type: "bar",
            data: data.map(d => d.tx),
            itemStyle: { color: "#52c41a" },
            barWidth: 12
          }
        ]
      });
    },
    drawCfgChangeChart(dom, value, date) {
      if (!dom) return;
      let myChart = echarts.init(dom);
      myChart.setOption({
        series: [{
          type: "gauge",
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 10,
          radius: '90%',  // 增大圆环尺寸
          progress: { show: true, width: 12 },  // 增加圆环宽度
          axisLine: {
            lineStyle: {
              width: 12,  // 增加圆环宽度
              color: [[1, '#d9d9d9']]  // 使用更深的灰色
            }
          },
          splitLine: { show: false },
          axisTick: { show: false },
          axisLabel: { show: false },
          pointer: { show: false },
          detail: {
            valueAnimation: true,
            formatter: '{value}次\n2024-08-20-2024-09-20',
            fontSize: 14,  // 减小字体大小
            lineHeight: 16,  // 调整行高
            color: '#333',
            offsetCenter: [0, '0%'],  // 将文字居中显示在圆环内
            rich: {
              value: {
                fontSize: 20,  // 减小数值字体大小
                fontWeight: 'bold',
                color: '#333'
              }
            }
          },
          data: [{ value }]
        }]
      });
    },
    drawTopologyChart(dom, data) {
      if (!dom) return;
      let myChart = echarts.init(dom);

      // 定义图标样式
      const symbolSize = 40;
      const lineStyle = {
        normal: {
          color: '#52c41a',
          width: 2,
          curveness: 0
        }
      };

      // 处理节点数据
      const nodes = data.nodes.map(node => {
        let symbol = 'circle';
        let itemStyle = { color: '#409EFF' };

        if (node.category === 'switch') {
          symbol = 'rect';
          itemStyle = { color: '#52c41a' };
        } else if (node.category === 'port') {
          symbol = 'circle';
          itemStyle = { color: '#1890ff' };
        }

        return {
          ...node,
          symbolSize,
          symbol,
          itemStyle,
          label: {
            show: true,
            position: 'bottom',
            formatter: node.name,
            fontSize: 12,
            color: '#666'
          }
        };
      });

      // 处理连线数据
      const links = data.links.map(link => {
        return {
          ...link,
          lineStyle
        };
      });

      // 设置图表选项
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [{
          type: 'graph',
          layout: 'none',
          symbolSize,
          roam: false,
          label: {
            show: true
          },
          edgeSymbol: ['none', 'none'],
          edgeSymbolSize: 10,
          edgeLabel: {
            fontSize: 12
          },
          data: nodes,
          links: links,
          lineStyle
        }]
      });
    }
  }
};
</script>

<style scoped>
.warn-dashboard {
  background: #f7f8fa;
  padding: 18px 18px 0 18px;
  min-width: 1200px;
}
.top-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 18px;
}
.alarm-group {
  display: flex;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 0 0 0 0;
  min-width: 420px;
  min-height: 90px;
  align-items: center;
  flex: none;
}
.alarm-group .stat-card.alarm {
  flex: 1;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 0 12px 0;
  min-width: 90px;
  min-height: 80px;
  position: relative;
}
.stat-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.alarm-group .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-bottom: 0;
  display: inline-block;
}
.alarm-group .stat-value {
  color: #222;
  font-size: 22px;
  font-weight: bold;
}
.alarm-group .stat-label {
  font-size: 13px;
  color: #888;
  margin-top: 2px;
  letter-spacing: 1px;
}
.stat-card.perf {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 0 12px 0;
  min-width: 120px;
  min-height: 80px;
  position: relative;
  margin-left: 0;
}
.stat-card.perf .stat-icon {
  font-size: 28px;
  color: #1890ff;
  margin-bottom: 2px;
}
.stat-card.perf .stat-value {
  color: #222;
  font-size: 22px;
  font-weight: bold;
}
.stat-card .unit {
  font-size: 14px;
  color: #888;
  margin-left: 2px;
  font-weight: normal;
}
.stat-label {
  font-size: 13px;
  color: #888;
  margin-top: 2px;
  letter-spacing: 1px;
}

.bottom-status {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
}
.status-card {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 18px 18px 10px 18px;
  min-width: 320px;
}
.status-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.status-title i {
  font-size: 18px;
  color: #409eff;
}
.status-list {
  display: flex;
  gap: 24px;
  align-items: center;
}
.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}
.status-value {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 2px;
}
.status-item.up .status-value { color: #1890ff; }
.status-item.down .status-value { color: #ff4d4f; }
.status-item.fault .status-value { color: #faad14; }
.status-item.other .status-value { color: #aaa; }
.status-label {
  font-size: 13px;
  color: #888;
}
@media (max-width: 1400px) {
  .warn-dashboard { min-width: 900px; }
  .status-card { min-width: 220px; }
}
.charts-section {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
}
.chart-card {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 18px 18px 10px 18px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
}
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.chart-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.chart-max {
  font-size: 14px;
  color: #888;
  margin-left: 10px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  font-size: 14px;
}
.chart-box {
  width: 100%;
  height: 180px;
}
.bottom-extra-section {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
}
.extra-card {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 18px 18px 10px 18px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  position: relative;
}
.extra-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2px;
}
.extra-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}
.extra-max {
  font-size: 14px;
  color: #888;
  margin-left: 10px;
}
.extra-max-value {
  color: #222;
  font-size: 20px;
  font-weight: bold;
  margin-right: 2px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  font-size: 14px;
}
.extra-chart {
  width: 100%;
  height: 120px;
}
.extra-pie {
  width: 120px;
  height: 120px;
  margin: 0 auto;
}
.extra-info {
  flex: 1;
  margin-left: 18px;
  min-width: 120px;
}
.extra-info-list {
  font-size: 13px;
  color: #888;
  margin-top: 8px;
  line-height: 1.8;
}
.extra-info-list div {
  margin-bottom: 8px;
  color: #666;
  font-size: 14px;
}

/* 新增拓扑图样式 */
.topology-section {
  margin-bottom: 18px;
}
.topology-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 18px 18px 10px 18px;
  position: relative;
}
.topology-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}
.topology-chart {
  width: 100%;
  height: 180px;
  position: relative;
}
.topology-legend {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
}
.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
  color: #666;
}
.legend-icon {
  width: 12px;
  height: 12px;
  margin-right: 6px;
  display: inline-block;
}
.legend-icon.router {
  background-color: #409EFF;
  border-radius: 2px;
}
.legend-icon.switch {
  background-color: #52c41a;
  border-radius: 2px;
}
.legend-icon.server {
  background-color: #faad14;
  border-radius: 50%;
}
.legend-icon.warning {
  background-color: #ff4d4f;
  border-radius: 50%;
}
</style>
